<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <input id="objId" th:value="${pefassobject.id}" type="hidden"/>
    <input id="typeYB" th:value="${type}" type="hidden"/>
    <form class="form-horizontal m" id="form-zhibiao">
        <input id="id" name="id" th:value="${approver.id}" type="hidden">
        <input id="tableId" name="tableId" th:value="${approver.tableId}" type="hidden">
        <input id="approveorder" name="approveorder" th:value="${approver.approveorder}" type="hidden">
        <div class="tableArea hidden" id="tableDiv">
            <h4 class="form-header h4">表格信息</h4>
            <table class="table table-striped" id="table">
                <!--在此处填充表格数据-->
            </table>
        </div>
        <h4 class="form-header h4" style="padding-top: 20px;">本人意见</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <!--<label class="col-xs-2 control-label">意见：</label>-->
                    <div class="col-xs-12">
                        <textarea class="form-control" id="remark" name="remark"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- 循环出历史意见 -->
    <div class="row">
        <div class="col-sm-12 m">
            <h4 class="form-header h4">历史信息</h4>
            <table class="table table-striped">
                <tr>
                    <th class="col-sm-1">序号</th>
                    <th class="col-sm-1">工号</th>
                    <th class="col-sm-2">参评人角色</th>
                    <th class="col-sm-5">意见</th>
                    <th class="col-sm-3">时间</th>
                </tr>
                <tr th:each="approveResult:${approveResults}">
                    <td th:text="${approveResult.appresorder}"></td>
                    <td th:text="${approveResult.userCode}"></td>
                    <td th:text="${approveResult.roleName}"></td>
                    <td th:text="${approveResult.remark}"></td>
                    <td th:text="${#dates.format(approveResult.createDate, 'yyyy-MM-dd')}"></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <div style="float: left;width:30%;">
            <button onclick="loadFiles('A')"
                    th:style="${deptparamRole.isCheck=='Y'}?'display:inline;width:auto;':'display:none;width:auto;'" th:text="${pefassobject.myRemark!=null}?'查看'+${pefassobject.myRemark}:'查看附件'"
                    type="button"><i
                    class="fa fa-search"></i></button>
            <button onclick="loadFiles('B')"
                    th:style="${deptparamRole.isCheck=='Y'}?'display:inline;width:auto;':'display:none;width:auto;'" th:text="${pefassobject.otherRemark!=null}?'查看'+${pefassobject.otherRemark}:'查看附件'"
                    type="button"><i
                    class="fa fa-search"></i></button>
            <button onclick="uploadFiles('B')"
                    th:style="${deptparamRole.isUpload=='Y'}?'display:inline;width:auto;':'display:none;width:auto;'" th:text="${pefassobject.otherRemark!=null}?'上传'+${pefassobject.otherRemark}:'上传附件'"
                    type="button"><i
                    class="fa fa-upload"></i></button>
            <input id="isUpload" th:value="${deptparamRole.isUpload}" type="hidden"/>
        </div>
        <button class="btn btn-sm btn-primary" onclick="doSubmit()" th:if="${type!=1}" type="button"><i
                class="fa fa-check"></i>提 交
        </button>&nbsp;
        <!--<button type="button" class="btn btn-sm btn-primary" onclick="doReturn()"><i class="fa fa-check"></i>退 回</button>&nbsp;-->
        <button onclick="appealfun()" th:if="${type==1}">申诉</button>
        <button class="btn btn-sm btn-danger" onclick="closeItem()" type="button"><i class="fa fa-reply-all"></i>关 闭
        </button>
        <!--<button type="button" class="btn btn-sm btn-danger" onclick="getDate()">得到数据</button>-->
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs//datapicker/bootstrap-datetimepicker.min.js}"></script>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script type="text/javascript">
    var prefix = ctx + "zzjx/pefassproject";
    $(function () {
        doChange(); //初始化表格信息
        if ($("#typeYB").val() == 1) {
            $('input[type="text"]').attr('disabled', 'disabled');
            $('input[type="radio"]').attr('disabled', 'disabled');
            $('textarea').attr('disabled', 'disabled');
            $('select').attr('disabled', 'disabled');
        }
    })
    $("#form-zhibiao").validate({
        rules: {
            xx: {
                required: true,
            },
        },
        focusCleanup: true
    });

    function doSubmit() {
        if ($.validate.form()) {
            var data = $("#form-zhibiao").serializeArray();
            data.push({"name": "tableDataJson", "value": JSON.stringify($("#table").bootstrapTable('getData'))});
            $.operate.saveTab(ctx + "zzjx/approver/doSubmit", data);
        }
    }


    /**
     * 更改模板，重新加载预览信息
     * @returns {boolean}
     */
    function doChange() {
        var id = $("#id").val();
        var tableId = $("#tableId").val(); //表单id
        if (tableId != "") {
            $.modal.loading("请等待加载预览信息!");
            $.ajax({
                url: ctx + "zzjx/pefctasstable/preview"
                , data: {"tableId": tableId, "id": id}
                , dataType: "JSON"
                , type: "GET"
                , async: false
                , success: function (result) {
                    $("#table").html("");
                    var dictData = result.dictData;
                    var list = result.list;
                    buildTable($('#table'), dictData.length, list.length, dictData, list);
                    $.modal.closeLoading();
                }, error: function () {
                    $.modal.closeLoading();
                    $.modal.alertError("获取预览信息失败!");
                }
            })
            $("#tableDiv").removeClass("hidden");
            return false;
        }
        $("#tableDiv").addClass("hidden");
    }


    /**
     * 构建预览信息表格
     * @param $el
     * @param cells
     * @param rows
     * @param dictData
     * @param peftempletindicatorList
     */
    function buildTable($el, cells, rows, dictData, peftempletindicatorList) {
        var i, j, row,
            columns = [],
            data = [];

        //拼接table,拼接表头
        for (var dd in dictData) {
            var dictLabel = dictData[dd]["dictLabel"];//显示名称
            var dictValue = dictData[dd]["dictValue"];//字段值

            var f = {
                field: dictValue,
                title: dictLabel
            }
            if (dictValue == "id") {
                f = {
                    field: dictValue,
                    title: dictLabel,
                    visible: false
                }
            }
            columns.push(f);
        }

        //拼接数据
        for (var i in peftempletindicatorList) {
            row = {};
            for (var dd in dictData) {
                var dictValue = dictData[dd]["dictValue"];//字段值
                for (var key in peftempletindicatorList[i]) {    //map key 
                    //console.log(key);
                    //console.log(peftempletindicatorList[i][key]);  //map value
                    if (key == dictValue) {
                        row[key] = peftempletindicatorList[i][key];
                    }
                }
            }
            data.push(row);
        }

        $el.bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: data,
            search: false,
            /**
             * @param {点击列的 field 名称} field
             * @param {点击列的 value 值} value
             * @param {点击列的整行数据} row
             * @param {td 元素} $element
             */
            onClickCell: function (field, value, row, $element) {
                if (field.slice(0, 6) == "target") {
                    $element.attr('contenteditable', true);
                    $element.blur(function () {
                        var index = $element.parent().data('index');
                        var tdValue = $element.html();
                        saveData(index, field, tdValue);
                    })
                }
            }
        });
    }

    function saveData(index, field, value) {
        $("#table").bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: value        //cell值
        })
    }

    //得到表的数据
    function getDate() {
        alert(JSON.stringify($("#table").bootstrapTable('getData')));
    };

    function uploadFiles(type) {
        var objId = $("#objId").val();
        if (objId != "") {
            $.modal.loading("正在加载数据，请稍后...");
            var url = ctx + "zzjx/projectSysfile/toProjectSysfile?objId=" + objId + "&type=" + type;
            debugger
            var _url = $.common.isEmpty(url) ? "/404.html" : url;
            var _height = ($(window).height() - 250);
            layer.open({
                type: 2,
                maxmin: true,
                shade: 0.3,
                title: '附件上传',
                fix: false,
                area: [950 + 'px', _height + 'px'],
                content: _url,
                shadeClose: false,
                btn: ['<i class="fa fa-close"></i> 关闭'],
                cancel: function () {
                    return true;
                }
            });
            $.modal.closeLoading();
        }
    }

    function loadFiles(type) {
        var objId = $("#objId").val();
        var isUpload = $("#isUpload").val();
        if (type == "A") {
            isUpload = "N";
        }
        if (objId != "") {
            $.modal.loading("正在加载数据，请稍后...");
            var url = ctx + "zzjx/projectSysfile/toloadGrantfile?objId=" + objId + "&type=" + type + "&grant=" + isUpload;
            debugger
            var _url = $.common.isEmpty(url) ? "/404.html" : url;
            var _height = ($(window).height() - 270);
            layer.open({
                type: 2,
                maxmin: true,
                shade: 0.3,
                title: '查看附件',
                fix: false,
                area: [771 + 'px', _height + 'px'],
                content: _url,
                shadeClose: false,
                btn: ['<i class="fa fa-close"></i> 关闭'],
                cancel: function () {
                    return true;
                }
            });
            $.modal.closeLoading();
        }
    }

    function appealfun() {
        var approverId = $("#id").val();
        var roleId = $("#roleId").val();
        $.modal.loading("正在加载数据，请稍后...");
        var url = ctx + "zzjx/appealTab/toAppeal/" + approverId + "/" + roleId;
        debugger
        var _url = $.common.isEmpty(url) ? "/404.html" : url;
        var _height = ($(window).height() - 50);
        layer.open({
            type: 2,
            maxmin: true,
            shade: 0.3,
            title: '申诉管理',
            fix: false,
            area: [1199 + 'px', _height + 'px'],
            content: _url,
            shadeClose: false,
            btn: ['<i class="fa fa-close"></i> 关闭'],
            cancel: function () {
                return true;
            }
        });
        $.modal.closeLoading();
    }
</script>
</body>
</html>
